<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <router-link to="/product" tag="button">商品管理</router-link>

    <router-view></router-view>

</div>

<!--嵌套路由的实现    注意！：使用template定义模板是 模板内容还需要加一层div进行包裹-->
<template id="product">
    <div>
    <h1>商品管理</h1>
    <router-link to="/product/add">商品添加</router-link>
    <router-link to="/product/edit">商品修改</router-link>
        <!--显示子路由的一个标签-->
     <router-view></router-view>
    </div>
</template>

<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>

    //声明组件模板
    const product={
        template: '#product'
    }

    //
    const add={
        template: '<h1>商品添加</h1>'
    }
    const edit={
        template: '<h1>商品修改</h1>'
    }

    //定义路由对象
    const  router =new VueRouter({
        routes: [
            //嵌套在product里面路由配置 外面为同级路由会相互覆盖
            {path: "/product", component: product,children:[{path: 'add',component: add},{path: 'edit',component: edit}]}
        ]


    })


   const app = new Vue(
        {
            el: "#app",
            data: {},
            methods: {},
            router:router




        }
    )
</script>
</body>
</html>